<template>
    <van-row gutter="20">
        <van-col span="12">
            <div class="recommend-van-col recommend-bg-color1 hight484">
                <div class="recommend-van-title font-weight-bold font-size-32">
                    今日上新
                </div>
                <div class="recommend-van-content">
                    <van-row :gutter="[10, 10]">
                        <van-col span="12">
                            <div class="van-content-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="van-content-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="van-content-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="van-content-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </van-col>
        <van-col span="12">
            <div class="recommend-van-col recommend-bg-color2 hight237">
                <div class="recommend-van-title font-weight-bold font-size-32">
                    爱心助农
                </div>
                <div class="recommend-van-content">
                    <van-row :gutter="[10, 10]">
                        <van-col span="12">
                            <div class="van-min-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="van-min-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </div>
            <div class="recommend-van-col recommend-bg-color3 hight237 margin-top-20">
                <div class="recommend-van-title font-weight-bold font-size-32">
                    本地生活
                </div>
                <div class="recommend-van-content">
                    <van-row :gutter="[10, 10]">
                        <van-col span="12">
                            <div class="van-min-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                        <van-col span="12">
                            <div class="van-min-img">
                                <van-image :src="mapImg" fit="cover" />
                            </div>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </van-col>
    </van-row>
</template>

<script setup>
import mapImg from '@image/Recommend/content_01.png'
</script>

<style lang="scss" scoped>
.hight484 {
    height: 490px;
}

.hight237 {
    height: 237px;
}

.recommend-van-col {
    border-radius: 10px;
    position: relative;

    &::after,
    &::before {
        content: "";
        width: 26px;
        height: 26px;
        background-color: var(--bg-color);
        display: inline-block;
        position: absolute;
        border-radius: 50%;
        top: 70px;
        z-index: 1;
    }

    &::after {
        left: -13px;
    }

    &::before {
        right: -13px;
    }
}

.recommend-van-title,
.recommend-van-content {
    padding: 20px;
}

.recommend-van-title {
    height: 40px;
    line-height: 40px;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid var(--white);

}

.recommend-bg-color1 {
    background: linear-gradient(to right, #E0E8FB, #BABFF9);

    .recommend-van-title {
        color: #6E72D4;
    }
}
.recommend-bg-color2 {
    background: linear-gradient(to right,#E2E8E1, #8EC472);

    .recommend-van-title {
        color:#6E964B;
    }
}
.recommend-bg-color3 {
    background: linear-gradient(to right,#C4E9FC, #8BBDF7);

    .recommend-van-title {
        color:#458DD9;
    }
}
.van-content-img{max-height: 174px;overflow: hidden;border-radius:10px;}
.van-min-img {
    max-height: 114px;border-radius:10px;
    overflow: hidden;
}
</style>